<template>
  <el-form :inline="true">    
    <el-form-item label="学号">
      <el-input id="tbStuNum" type="text" 
      style="width: 180px;"
      v-model="newStudent.studentNo" />
    </el-form-item>
    <el-form-item label="姓名">
      <el-input id="tbStuName" type="text" 
        style="width: 160px;"
        v-model="newStudent.name" />
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="newStudent.gender">
        <el-radio value="m">男</el-radio>
        <el-radio value="f">女</el-radio>      
      </el-radio-group>
    </el-form-item>
    <el-form-item label="班级" style="align-items: center;">
      <el-select
        v-model="newStudent.class"
        placeholder="请选择班级"
        size="large"
        style="width: 160px"
      >
        <el-option
          v-for="c in clazz"
          :key="c"
          :label="c"
          :value="c"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button :icon="Plus"
      round plain type="primary" @click="onAddButtonClick">添加      
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'
import {
  Plus
} from '@element-plus/icons-vue'

// 定义组件中会抛出的事件，
// 该子组件中会抛出add-student事件
const emit = defineEmits(['add-student'])

const newStudent = ref({
  studentNo: "",
  name: "",
  class: null,
  subject: "软件工程专业",
  gender: "m"
});

const clazz = ref([
  '软件212', '软件213', '软件214'
])

function onAddButtonClick() {
  // 对象拷贝，下面的两行代码都可以，选其一
  // let studentToInsert = Object.assign({}, newStudent.value);
  let studentToInsert = JSON.parse(JSON.stringify(newStudent.value));
  
  newStudent.value.studentNo = '';
  newStudent.value.name = '';
  newStudent.value.gender = '';
  newStudent.value.class = null;
  if(studentToInsert.gender == 'm') {
    studentToInsert.gender = '男';
  } else if(studentToInsert.gender == 'f') {
    studentToInsert.gender = '女';
  }
  console.log(studentToInsert)
  emit('add-student', studentToInsert)
}
</script>

<style lang="scss">

</style>